<template>
  <div class="personnel-config-display" ref="containerRef">
    <!-- 左右布局容器 -->
    <div class="config-layout" :class="{ 'vertical-layout': isVerticalLayout }">
      <!-- 左侧：处理人员配置（占2/3） -->
      <div class="handler-config-section">
        <!-- 处理人员配置头部 -->
        <div class="config-section-header">
          <h6 class="sub-subsection-title">处理人员</h6>
          <div class="config-actions">
            <el-button
              type="text"
              size="small"
              @click="toggleHandlerConfig"
              class="toggle-config-btn"
            >
              <el-icon>
                <ArrowDown v-if="handlerConfigCollapsed" />
                <ArrowUp v-else />
              </el-icon>
              {{ handlerConfigCollapsed ? '展开配置' : '收起配置' }}
            </el-button>
          </div>
        </div>

        <!-- 处理人员列表展示 -->
        <SimplePersonnelList
          ref="personnelListRef"
          :assignees="assignees"
          @view-detail="handleViewDetail"
          @personnel-updated="handlePersonnelUpdated"
        />

        <!-- 处理人员配置项（默认收起） -->
        <div v-show="!handlerConfigCollapsed" class="config-details">
          <!-- 编辑权限提示 -->
          <div v-if="isEditDisabled" class="edit-permission-notice">
            <el-alert
              title="编辑权限受限"
              description="当前节点不允许对人员配置进行调整"
              type="warning"
              show-icon
              :closable="false"
            />
          </div>
          <div v-else-if="isEditLimited" class="edit-permission-notice">
            <el-alert
              title="编辑权限受限"
              description="只能在现有配置的人员范围内进行调整，不能新增未配置的人员"
              type="info"
              show-icon
              :closable="false"
            />
          </div>

          <PersonnelConfig
            :assignees="assignees"
            :disabled="isEditDisabled"
            :limited-mode="isEditLimited"
            :original-personnel="originalPersonnel"
            :personnel-edit-permission="personnelEditPermission"
            @openSelector="handleOpenSelector"
            @update:assignees="handleAssigneesChange"
          />
        </div>
      </div>

      <!-- 右侧：抄送配置（占1/3） -->
      <div class="cc-config-section">
        <!-- 抄送配置头部 -->
        <div class="config-section-header">
          <h6 class="sub-subsection-title">抄送配置</h6>
          <div class="config-actions">
            <el-button
              type="text"
              size="small"
              @click="toggleCcConfig"
              class="toggle-config-btn"
            >
              <el-icon>
                <ArrowDown v-if="ccConfigCollapsed" />
                <ArrowUp v-else />
              </el-icon>
              {{ ccConfigCollapsed ? '展开配置' : '收起配置' }}
            </el-button>
          </div>
        </div>

        <!-- 抄送配置内容区域 -->
        <div class="cc-content" :class="{ 'vertical-content': isVerticalLayout }">
          <!-- 抄送人员列表展示 -->
          <div class="cc-personnel-section">
            <SimplePersonnelList
              ref="ccPersonnelListRef"
              :assignees="ccAssignees"
              @view-detail="handleViewDetail"
              @personnel-updated="handleCcPersonnelUpdated"
            />
          </div>

          <!-- 通知方式（展开配置时显示） -->
          <div v-if="!ccConfigCollapsed" class="notification-methods-default">
            <div class="notification-methods-display">
              <el-checkbox-group v-model="selectedNotificationMethods" @change="onNotificationMethodsChange">
                <el-checkbox
                  v-for="method in allNotificationMethods"
                  :key="method.value"
                  :label="method.value"
                  class="notification-method-checkbox"
                >
                  {{ method.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>

        <!-- 抄送配置项（默认收起） -->
        <div v-show="!ccConfigCollapsed" class="cc-config-details">
          <!-- 编辑权限提示 -->
          <div v-if="isEditDisabled" class="edit-permission-notice">
            <el-alert
              title="编辑权限受限"
              description="当前节点不允许对抄送配置进行调整"
              type="warning"
              show-icon
              :closable="false"
            />
          </div>
          <div v-else-if="isEditLimited" class="edit-permission-notice">
            <el-alert
              title="编辑权限受限"
              description="只能在现有配置的人员范围内进行调整，不能新增未配置的人员"
              type="info"
              show-icon
              :closable="false"
            />
          </div>

          <PersonnelConfig
            :assignees="ccAssignees"
            :disabled="isEditDisabled"
            :limited-mode="isEditLimited"
            :original-personnel="originalPersonnel"
            :personnel-edit-permission="personnelEditPermission"
            @openSelector="handleCcOpenSelector"
            @update:assignees="handleCcAssigneesChange"
          />

          <!-- 展开配置时显示通知方式选择 -->
          <!-- 已移除，因为通知方式现在默认显示并可直接勾选 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import SimplePersonnelList from './SimplePersonnelList.vue'
import PersonnelConfig from '@/views/workflow/process/components/configs/PersonnelConfig.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  // 配置标题
  title: {
    type: String,
    default: '人员配置'
  },
  // 人员配置数据
  modelValue: {
    type: Array,
    default: () => []
  },
  // 抄送人员配置数据
  ccModelValue: {
    type: Array,
    default: () => []
  },
  // 通知方式数组
  notificationMethods: {
    type: Array,
    default: () => ['system']
  },
  // 是否默认收起处理人员配置
  defaultHandlerCollapsed: {
    type: Boolean,
    default: true
  },
  // 是否默认收起抄送配置
  defaultCcCollapsed: {
    type: Boolean,
    default: true
  },
  // 配置类型（用于区分处理人员和抄送人员）
  configType: {
    type: String,
    default: 'handler' // 'handler' | 'cc'
  },
  // 强制垂直布局（可选）
  forceVertical: {
    type: Boolean,
    default: false
  },
  // 人员编辑权限控制
  personnelEditPermission: {
    type: String,
    default: 'full', // 'disabled' | 'full' | 'limited'
    validator: (value) => ['disabled', 'full', 'limited'].includes(value)
  },
  // 原始人员配置（用于limited模式下的限制）
  originalPersonnel: {
    type: Array,
    default: () => []
  },
  // 原始抄送人员配置（用于比较配置是否被修改）
  originalCcPersonnel: {
    type: Array,
    default: () => []
  },
  // 原始通知方式配置（用于比较配置是否被修改）
  originalNotificationMethods: {
    type: Array,
    default: () => ['system']
  }
})

const emit = defineEmits([
  'update:modelValue',
  'change',
  'personnel-updated',
  'view-detail',
  'update:ccModelValue',
  'cc-change',
  'cc-personnel-updated',
  'notification-methods-change',
  'openSelector',
  'handler-config-collapsed-change',
  'cc-config-collapsed-change'
])

// 内部数据
const assignees = ref([...props.modelValue])
const ccAssignees = ref([...props.ccModelValue])
const notificationMethodsArray = ref([...props.notificationMethods])
const selectedNotificationMethods = ref([...props.notificationMethods])
const handlerConfigCollapsed = ref(props.defaultHandlerCollapsed)
const ccConfigCollapsed = ref(props.defaultCcCollapsed)
const personnelListRef = ref(null)
const ccPersonnelListRef = ref(null)
const containerRef = ref(null)

// 响应式布局相关
const isVerticalLayout = ref(false)
const BREAKPOINT = 800 // 断点宽度，小于此宽度时使用垂直布局

// 防止递归更新的标志
const isUpdating = ref(false)

// 编辑权限计算属性
const isEditDisabled = computed(() => props.personnelEditPermission === 'disabled')
const isEditLimited = computed(() => props.personnelEditPermission === 'limited')
const isEditFull = computed(() => props.personnelEditPermission === 'full')

// 通知方式相关数据
const allNotificationMethods = ref([
  { value: 'system', label: '系统内部' },
  { value: 'email', label: '邮件' },
  { value: 'sms', label: '短信' },
  { value: 'wechat', label: '微信' }
])

// 通知方式相关方法
const getNotificationMethodLabel = (method) => {
  const methodMap = {
    'system': '系统内部',
    'email': '邮件',
    'sms': '短信',
    'wechat': '微信'
  }
  return methodMap[method] || method
}

const getNotificationMethodType = (method) => {
  const typeMap = {
    'system': 'primary',
    'email': 'success',
    'sms': 'warning',
    'wechat': 'info'
  }
  return typeMap[method] || 'info'
}

const onNotificationMethodsChange = (methods) => {
  selectedNotificationMethods.value = methods
  notificationMethodsArray.value = methods
  emit('notification-methods-change', methods)
}

// 新增：权限验证方法
const validateEditPermission = (action, targetPersonnel) => {
  if (isEditDisabled.value) {
    ElMessage.warning('当前节点不允许对人员配置进行调整')
    return false
  }

  if (isEditLimited.value) {
    // 检查是否在现有配置范围内
    const isInOriginalRange = targetPersonnel.every(person =>
      props.originalPersonnel.some(original =>
        original.id === person.id || original.userId === person.id
      )
    )

    if (!isInOriginalRange) {
      ElMessage.warning('只能在现有配置的人员范围内进行调整，不能新增未配置的人员')
      return false
    }
  }

  return true
}

// 检查是否需要垂直布局
const checkLayout = () => {
  if (props.forceVertical) {
    isVerticalLayout.value = true
    return
  }

  if (containerRef.value) {
    const containerWidth = containerRef.value.offsetWidth
    const shouldBeVertical = containerWidth < BREAKPOINT
    isVerticalLayout.value = shouldBeVertical

    // 如果容器宽度为0，可能是还没有完全渲染，延迟重试
    if (containerWidth === 0) {
      setTimeout(() => {
        checkLayout()
      }, 200)
    }
  }
}

// 监听窗口大小变化
const handleResize = () => {
  checkLayout()
}

// 组件挂载时检查布局
onMounted(() => {
  // 使用 nextTick 确保 DOM 已经渲染
  nextTick(() => {
    checkLayout()
    // 添加一个小的延迟，确保容器尺寸已经稳定
    setTimeout(() => {
      checkLayout()
    }, 100)
  })
  window.addEventListener('resize', handleResize)
})

// 组件卸载时移除监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  if (!isUpdating.value) {
    assignees.value = [...newValue]
  }
}, { deep: true })

watch(() => props.ccModelValue, (newValue) => {
  if (!isUpdating.value) {
    ccAssignees.value = [...newValue]
  }
}, { deep: true })

watch(() => props.notificationMethods, (newValue) => {
  if (!isUpdating.value) {
    notificationMethodsArray.value = [...newValue]
    selectedNotificationMethods.value = [...newValue]
  }
}, { deep: true })

// 监听展开状态变化，通知父组件
watch(handlerConfigCollapsed, (newValue) => {
  emit('handler-config-collapsed-change', newValue)
})

watch(ccConfigCollapsed, (newValue) => {
  emit('cc-config-collapsed-change', newValue)
})

// 处理人员配置变化
const handleAssigneesChange = (newAssignees) => {
  if (!isUpdating.value) {
    isUpdating.value = true
    assignees.value = newAssignees
    emit('update:modelValue', newAssignees)
    emit('change', newAssignees)
    isUpdating.value = false
  }
}

// 处理抄送人员配置变化
const handleCcAssigneesChange = (newCcAssignees) => {
  if (!isUpdating.value) {
    isUpdating.value = true
    ccAssignees.value = newCcAssignees
    emit('update:ccModelValue', newCcAssignees)
    emit('cc-change', newCcAssignees)
    isUpdating.value = false
  }
}

// 处理人员列表更新
const handlePersonnelUpdated = (personnel) => {
  if (!validateEditPermission('update', personnel)) {
    return
  }

  emit('personnel-updated', personnel)
}

// 处理抄送人员列表更新
const handleCcPersonnelUpdated = (personnel) => {
  if (!validateEditPermission('update', personnel)) {
    return
  }

  emit('cc-personnel-updated', personnel)
}

// 处理查看人员详情
const handleViewDetail = (person) => {
  emit('view-detail', person)
}

// 处理打开选择器事件
const handleOpenSelector = (data) => {
  // 不再需要向父组件发送事件，因为选择器现在内置在PersonnelConfig中
  // 这里可以添加其他处理逻辑，比如日志记录等
}

// 处理抄送打开选择器事件
const handleCcOpenSelector = (data) => {
  // 不再需要向父组件发送事件，因为选择器现在内置在PersonnelConfig中
  // 这里可以添加其他处理逻辑，比如日志记录等
}

// 处理人员配置展开/收起
const toggleHandlerConfig = () => {
  handlerConfigCollapsed.value = !handlerConfigCollapsed.value
}

// 处理抄送配置展开/收起
const toggleCcConfig = () => {
  ccConfigCollapsed.value = !ccConfigCollapsed.value
}

// 监听通知方式变化
watch(notificationMethodsArray, (newMethods) => {
  emit('notification-methods-change', newMethods)
}, { deep: true })

// 暴露方法给父组件
defineExpose({
  // 获取当前人员配置
  getAssignees: () => assignees.value,

  // 设置人员配置
  setAssignees: (newAssignees) => {
    assignees.value = [...newAssignees]
    emit('update:modelValue', assignees.value)
    emit('change', assignees.value)
  },

  // 获取抄送人员配置
  getCcAssignees: () => ccAssignees.value,

  // 设置抄送人员配置
  setCcAssignees: (newCcAssignees) => {
    ccAssignees.value = [...newCcAssignees]
    emit('update:ccModelValue', ccAssignees.value)
    emit('cc-change', ccAssignees.value)
  },

  // 获取通知方式
  getNotificationMethods: () => notificationMethodsArray.value,

  // 设置通知方式
  setNotificationMethods: (newMethods) => {
    notificationMethodsArray.value = [...newMethods]
    selectedNotificationMethods.value = [...newMethods]
    emit('notification-methods-change', notificationMethodsArray.value)
  },

  // 获取转换后的人员列表
  getPersonnel: () => {
    if (personnelListRef.value) {
      return personnelListRef.value.getPersonnel()
    }
    return []
  },

  // 获取转换后的抄送人员列表
  getCcPersonnel: () => {
    if (ccPersonnelListRef.value) {
      return ccPersonnelListRef.value.getPersonnel()
    }
    return []
  },

  // 获取人员数量
  getPersonnelCount: () => {
    if (personnelListRef.value) {
      return personnelListRef.value.getPersonnelCount()
    }
    return 0
  },

  // 获取抄送人员数量
  getCcPersonnelCount: () => {
    if (ccPersonnelListRef.value) {
      return ccPersonnelListRef.value.getPersonnelCount()
    }
    return 0
  },

  // 展开处理人员配置
  expandHandlerConfig: () => {
    handlerConfigCollapsed.value = false
  },

  // 收起处理人员配置
  collapseHandlerConfig: () => {
    handlerConfigCollapsed.value = true
  },

  // 展开抄送配置
  expandCcConfig: () => {
    ccConfigCollapsed.value = false
  },

  // 收起抄送配置
  collapseCcConfig: () => {
    ccConfigCollapsed.value = true
  },

  // 重置配置
  reset: () => {
    assignees.value = []
    ccAssignees.value = []
    notificationMethodsArray.value = ['system']
    selectedNotificationMethods.value = ['system']
    handlerConfigCollapsed.value = props.defaultHandlerCollapsed
    ccConfigCollapsed.value = props.defaultCcCollapsed
    emit('update:modelValue', [])
    emit('change', [])
    emit('update:ccModelValue', [])
    emit('cc-change', [])
    emit('notification-methods-change', ['system'])
  }
})
</script>

<style scoped>
.personnel-config-display {
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}

/* 左右布局 */
.config-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap; /* 允许换行 */
}

/* 垂直布局 */
.vertical-layout {
  flex-direction: column;
  gap: 16px;
}

/* 左侧：处理人员配置（占2/3） */
.handler-config-section {
  flex: 2;
  min-width: 300px; /* 设置最小宽度，防止过度压缩 */
  max-width: calc(66.666% - 8px); /* 最大宽度为2/3减去gap的一半 */
  padding: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fafbfc;
}

/* 垂直布局时，处理人员配置占满宽度 */
.vertical-layout .handler-config-section {
  flex: none;
  width: 100%;
  max-width: 100%;
}

/* 右侧：抄送配置（占1/3） */
.cc-config-section {
  flex: 1;
  min-width: 280px; /* 设置最小宽度，确保内容不被过度压缩 */
  max-width: calc(33.333% - 8px); /* 最大宽度为1/3减去gap的一半 */
  padding: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fafbfc;
}

/* 垂直布局时，抄送配置占满宽度 */
.vertical-layout .cc-config-section {
  flex: none;
  width: 100%;
  max-width: 100%;
}

/* 抄送配置内容区域 */
.cc-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap; /* 允许换行 */
}

/* 垂直内容区域 */
.vertical-content {
  flex-direction: column;
  gap: 12px;
}

/* 抄送人员区域 */
.cc-personnel-section {
  flex: 1;
  min-width: 595px; /* 设置最小宽度 */
  max-width: calc(60% - 6px); /* 最大宽度为60%减去gap的一半 */
}

/* 垂直布局时，抄送人员区域占满宽度 */
.vertical-content .cc-personnel-section {
  flex: none;
  width: 100%;
  max-width: 100%;
}

/* 通知方式样式 */
.notification-methods-default {
  margin-top: 16px;
  width: 100%;
}

.notification-methods-display {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.notification-method-checkbox {
  margin-right: 0;
  min-width: 80px;
  flex-shrink: 0;
}

.notification-method-checkbox :deep(.el-checkbox__label) {
  font-size: 12px;
  color: #606266;
}

.notification-methods-default .sub-subsection-title {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: #606266;
}

.notification-methods-default .el-checkbox-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-methods-default .el-checkbox {
  margin-right: 0;
  font-size: 12px;
  white-space: nowrap;
}

.notification-methods-default .el-checkbox__label {
  font-size: 12px;
}

.config-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebeef5;
}

.sub-subsection-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #606266;
}

.config-actions {
  display: flex;
  gap: 8px;
}

.toggle-config-btn {
  color: #606266;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.toggle-config-btn:hover {
  color: #409eff;
  background: #f0f9ff;
}

.config-details {
  margin-top: 8px;
  padding: 1px;
  border-radius: 4px;
}

.cc-config-details {
  margin-top: 8px;
  padding: 1px;
  border-radius: 4px;
}

.el-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.el-checkbox {
  margin-right: 0;
}

.config-personnel-btn {
  color: #606266;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.config-personnel-btn:hover {
  color: #409eff;
  background: #f0f9ff;
}

/* 弹窗头部样式 */
.dialog-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.selector-type-tabs {
  display: flex;
  align-items: center;
}

/* 弹窗内容样式 */
.personnel-selector-content {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
  padding: 16px;
  background: #fafbfc;
  border-radius: 6px;
}

/* 响应式断点 */
@media (max-width: 1200px) {
  .config-layout {
    gap: 12px;
  }

  .handler-config-section {
    min-width: 280px;
  }

  .cc-config-section {
    min-width: 260px;
  }
}

@media (max-width: 1000px) {
  .config-layout {
    gap: 10px;
  }

  .handler-config-section {
    min-width: 260px;
  }

  .cc-config-section {
    min-width: 240px;
  }
}

@media (max-width: 800px) {
  .config-layout {
    flex-direction: column;
    gap: 16px;
  }

  .handler-config-section,
  .cc-config-section {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .cc-content {
    flex-direction: column;
    gap: 12px;
  }

  .cc-personnel-section,
  .notification-methods-default {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .notification-methods-default {
    min-width: auto;
  }
}

@media (max-width: 600px) {
  .config-layout {
    gap: 12px;
  }

  .handler-config-section,
  .cc-config-section {
    padding: 6px;
  }

  .cc-content {
    gap: 10px;
  }

  .notification-methods-default {
    padding: 6px;
  }

  .notification-methods-default .el-checkbox-group {
    gap: 6px;
  }

  .notification-methods-default .el-checkbox {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .config-layout {
    gap: 10px;
  }

  .handler-config-section,
  .cc-config-section {
    padding: 4px;
  }

  .cc-content {
    gap: 8px;
  }

  .notification-methods-default {
    padding: 4px;
  }

  .notification-methods-default .el-checkbox-group {
    gap: 4px;
  }

  .notification-methods-default .el-checkbox {
    font-size: 10px;
  }
}

/* 通知方式配置样式（已移除，保留注释） */
.notification-methods-config {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fafbfc;
}
</style>
